<template>
  <div class="pinyin-alphabet">
    <div class="container">
      <h2>拼音字母表</h2>
      
      <div class="content-box">
        <div class="type-selector">
          <el-radio-group v-model="currentType">
            <el-radio-button :value="'alphabet'">字母表</el-radio-button>
            <el-radio-button :value="'shengmu'">声母表</el-radio-button>
            <el-radio-button :value="'yunmu'">韵母表</el-radio-button>
            <el-radio-button :value="'zhengti'">整体认读音节</el-radio-button>
          </el-radio-group>
        </div>

        <!-- 字母表 -->
        <div v-if="currentType === 'alphabet'" class="alphabet-section">
          <div class="subtitle">一共有 26 个字母表字母</div>
          <div class="letter-grid">
            <div v-for="letter in alphabetList" :key="letter" class="letter-item">
              {{ letter }}
            </div>
          </div>
        </div>

        <!-- 声母表 -->
        <div v-if="currentType === 'shengmu'" class="shengmu-section">
          <div class="subtitle">声母表</div>
          <div class="letter-grid">
            <div v-for="item in shengmuList" 
                 :key="item.pinyin" 
                 class="letter-item"
                 @click="playAudio(item.pinyin)">
              <div class="pinyin">{{ item.pinyin }}</div>
              <div class="hanzi">{{ item.hanzi }}</div>
              <el-icon class="play-icon">
                <VideoPlay />
              </el-icon>
            </div>
          </div>
        </div>

        <!-- 韵母表 -->
        <div v-if="currentType === 'yunmu'" class="yunmu-section">
          <div class="subtitle">韵母表</div>

          <!-- 单韵母 -->
          <div class="yunmu-group">
            <div class="group-title">单韵母</div>
            <div class="letter-grid">
              <div v-for="item in yunmuList.single" 
                   :key="item.pinyin" 
                   class="letter-item"
                   @click="playAudio(item.pinyin)">
                <div class="pinyin">{{ item.pinyin }}</div>
                <div class="hanzi">{{ item.hanzi }}</div>
                <el-icon class="play-icon">
                  <VideoPlay />
                </el-icon>
              </div>
            </div>
          </div>

          <!-- 复韵母 -->
          <div class="yunmu-group">
            <div class="group-title">复韵母</div>
            <div class="letter-grid">
              <div v-for="item in yunmuList.compound" 
                   :key="item.pinyin" 
                   class="letter-item"
                   @click="playAudio(item.pinyin)">
                <div class="pinyin">{{ item.pinyin }}</div>
                <div class="hanzi">{{ item.hanzi }}</div>
                <el-icon class="play-icon">
                  <VideoPlay />
                </el-icon>
              </div>
            </div>
          </div>

          <!-- 前鼻韵母 -->
          <div class="yunmu-group">
            <div class="group-title">前鼻韵母</div>
            <div class="letter-grid">
              <div v-for="item in yunmuList.frontNasal" 
                   :key="item.pinyin" 
                   class="letter-item"
                   @click="playAudio(item.pinyin)">
                <div class="pinyin">{{ item.pinyin }}</div>
                <div class="hanzi">{{ item.hanzi }}</div>
                <el-icon class="play-icon">
                  <VideoPlay />
                </el-icon>
              </div>
            </div>
          </div>

          <!-- 后鼻韵母 -->
          <div class="yunmu-group">
            <div class="group-title">后鼻韵母</div>
            <div class="letter-grid">
              <div v-for="item in yunmuList.backNasal" 
                   :key="item.pinyin" 
                   class="letter-item"
                   @click="playAudio(item.pinyin)">
                <div class="pinyin">{{ item.pinyin }}</div>
                <div class="hanzi">{{ item.hanzi }}</div>
                <el-icon class="play-icon">
                  <VideoPlay />
                </el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 整体认读音节 -->
        <div v-if="currentType === 'zhengti'" class="zhengti-section">
          <div class="subtitle">整体认读音节</div>
          <div class="letter-grid">
            <div v-for="item in zhengtiList" 
                 :key="item.pinyin" 
                 class="letter-item"
                 @click="playAudio(item.pinyin)">
              <div class="pinyin">{{ item.pinyin }}</div>
              <div class="hanzi">{{ item.hanzi }}</div>
              <el-icon class="play-icon">
                <VideoPlay />
              </el-icon>
            </div>
          </div>
        </div>

        <div class="help-text">
          <h3>帮助说明：</h3>
          <p>拼音字母表，支持声母、韵母、整体认读音节在线查看。</p>
        </div>

        <div class="back-home">
          <el-button @click="goHome">
            <el-icon><HomeFilled /></el-icon>
            返回首页
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { HomeFilled, VideoPlay } from '@element-plus/icons-vue'

const router = useRouter()
const currentType = ref('alphabet')
const audioPlayer = ref(null)

// 字母表数据
const alphabetList = [
  'A a', 'B b', 'C c', 'D d', 'E e', 'F f',
  'G g', 'H h', 'I i', 'J j', 'K k', 'L l',
  'M m', 'N n', 'O o', 'P p', 'Q q', 'R r',
  'S s', 'T t', 'U u', 'V v', 'W w', 'X x',
  'Y y', 'Z z'
]

// 声母表数据
const shengmuList = [
  { pinyin: 'b', hanzi: '玻' },
  { pinyin: 'p', hanzi: '坡' },
  { pinyin: 'm', hanzi: '摸' },
  { pinyin: 'f', hanzi: '佛' },
  { pinyin: 'd', hanzi: '得' },
  { pinyin: 't', hanzi: '特' },
  { pinyin: 'n', hanzi: '讷' },
  { pinyin: 'l', hanzi: '勒' },
  { pinyin: 'g', hanzi: '哥' },
  { pinyin: 'k', hanzi: '科' },
  { pinyin: 'h', hanzi: '喝' },
  { pinyin: 'j', hanzi: '基' },
  { pinyin: 'q', hanzi: '欺' },
  { pinyin: 'x', hanzi: '希' },
  { pinyin: 'zh', hanzi: '知' },
  { pinyin: 'ch', hanzi: '吃' },
  { pinyin: 'sh', hanzi: '诗' },
  { pinyin: 'r', hanzi: '日' },
  { pinyin: 'z', hanzi: '资' },
  { pinyin: 'c', hanzi: '雌' },
  { pinyin: 's', hanzi: '思' },
  { pinyin: 'y', hanzi: '医' },
  { pinyin: 'w', hanzi: '屋' }
]

// 修改韵母表数据结构
const yunmuList = {
  // 单韵母
  single: [
    { pinyin: 'a', hanzi: '阿' },
    { pinyin: 'o', hanzi: '喔' },
    { pinyin: 'e', hanzi: '鹅' },
    { pinyin: 'i', hanzi: '衣' },
    { pinyin: 'u', hanzi: '乌' },
    { pinyin: 'ü', hanzi: '迂' }
  ],
  // 复韵母
  compound: [
    { pinyin: 'ai', hanzi: '哀' },
    { pinyin: 'ei', hanzi: '诶' },
    { pinyin: 'ui', hanzi: '威' },
    { pinyin: 'ao', hanzi: '奥' },
    { pinyin: 'ou', hanzi: '欧' },
    { pinyin: 'iu', hanzi: '优' },
    { pinyin: 'ie', hanzi: '耶' },
    { pinyin: 'üe', hanzi: '约' },
    { pinyin: 'er', hanzi: '儿' }
  ],
  // 前鼻韵母
  frontNasal: [
    { pinyin: 'an', hanzi: '安' },
    { pinyin: 'en', hanzi: '恩' },
    { pinyin: 'in', hanzi: '因' },
    { pinyin: 'un', hanzi: '温' },
    { pinyin: 'ün', hanzi: '晕' }
  ],
  // 后鼻韵母
  backNasal: [
    { pinyin: 'ang', hanzi: '昂' },
    { pinyin: 'eng', hanzi: '更' },
    { pinyin: 'ing', hanzi: '英' },
    { pinyin: 'ong', hanzi: '翁' }
  ]
}

// 修改整体认读音节数据结构
const zhengtiList = [
  { pinyin: 'zhi', hanzi: '知' },
  { pinyin: 'chi', hanzi: '吃' },
  { pinyin: 'shi', hanzi: '使' },
  { pinyin: 'ri', hanzi: '日' },
  { pinyin: 'zi', hanzi: '资' },
  { pinyin: 'ci', hanzi: '此' },
  { pinyin: 'si', hanzi: '思' },
  { pinyin: 'yi', hanzi: '衣' },
  { pinyin: 'wu', hanzi: '屋' },
  { pinyin: 'yu', hanzi: '鱼' },
  { pinyin: 'ye', hanzi: '夜' },
  { pinyin: 'yue', hanzi: '月' },
  { pinyin: 'yuan', hanzi: '圆' },
  { pinyin: 'yin', hanzi: '因' },
  { pinyin: 'yun', hanzi: '云' },
  { pinyin: 'ying', hanzi: '英' }
]

const goHome = () => {
  router.push('/')
}

// 修改播放音频的方法
const playAudio = (pinyin) => {
  // 如果已经有音频在播放，先停止
  if (audioPlayer.value) {
    audioPlayer.value.pause()
    audioPlayer.value = null
  }

  // 创建新的音频实例
  const audio = new Audio(`/audio/pinyin/${pinyin}.mp3`)
  audioPlayer.value = audio

  // 播放音频
  audio.play().catch(error => {
    console.error('音频播放失败:', error)
  })

  // 播放完成后清理
  audio.onended = () => {
    audioPlayer.value = null
  }
}

// 组件卸载时清理音频
onUnmounted(() => {
  if (audioPlayer.value) {
    audioPlayer.value.pause()
    audioPlayer.value = null
  }
})
</script>

<style lang="scss" scoped>
.pinyin-alphabet {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;

  h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
  }

  .content-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    padding: 20px;

    .type-selector {
      text-align: center;
      margin-bottom: 30px;
    }

    .subtitle {
      font-size: 16px;
      color: #666;
      margin-bottom: 20px;
      text-align: left;
      font-weight: bold;
    }

    .letter-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
      margin-bottom: 30px;

      .letter-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        min-height: 70px;
        cursor: pointer;

        .pinyin {
          font-size: 26px;
          color: #2b85e4;
          margin-bottom: 8px;
        }

        .hanzi {
          font-size: 16px;
          color: #666;
        }

        .play-icon {
          position: absolute;
          right: 8px;
          top: 8px;
          color: #2b85e4;
          font-size: 18px;
          opacity: 1;
        }

        &:hover {
          border-color: #2b85e4;
          background-color: #f8f9fe;
        }
      }
    }

    .alphabet-section {
      .letter-grid {
        .letter-item {
          font-size: 26px;
          color: #2b85e4;
          text-align: center;
          padding: 15px;
        }
      }
    }

    .shengmu-section {
      .letter-grid {
        .letter-item {
          gap: 2px;
        }
      }
    }

    .yunmu-section {
      .yunmu-group {
        margin-bottom: 30px;

        .group-title {
          font-size: 16px;
          color: #333;
          margin-bottom: 15px;
          padding-left: 10px;
        }

        .letter-grid {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 10px;
        }
      }

      .letter-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        min-height: 70px;
        cursor: pointer;

        .pinyin {
          font-size: 26px;
          color: #2b85e4;
          margin-bottom: 8px;
        }

        .hanzi {
          font-size: 16px;
          color: #666;
        }

        .play-icon {
          position: absolute;
          right: 8px;
          top: 8px;
          color: #2b85e4;
          font-size: 18px;
          opacity: 1;
        }

        &:hover {
          border-color: #2b85e4;
          background-color: #f8f9fe;
        }
      }
    }

    .zhengti-section {
      .letter-grid {
        .letter-item {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 15px 10px;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          min-height: 70px;
          cursor: pointer;

          .pinyin {
            font-size: 26px;
            color: #2b85e4;
            margin-bottom: 8px;
          }

          .hanzi {
            font-size: 16px;
            color: #666;
          }

          .play-icon {
            position: absolute;
            right: 8px;
            top: 8px;
            color: #2b85e4;
            font-size: 18px;
            opacity: 1;
          }

          &:hover {
            border-color: #2b85e4;
            background-color: #f8f9fe;
          }
        }
      }
    }

    .help-text {
      background: #f5f7fa;
      padding: 15px;
      border-radius: 4px;
      text-align: left;

      h3 {
        color: #67c23a;
        margin: 0 0 10px 0;
        font-size: 16px;
      }

      p {
        color: #666;
        margin: 0;
        line-height: 1.6;
      }
    }

    .back-home {
      text-align: center;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #ebeef5;

      .el-button {
        width: 200px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .pinyin-alphabet {
    padding: 10px;

    .content-box {
      padding: 15px;

      .letter-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;

        .letter-item {
          padding: 10px;
          min-height: 60px;

          .pinyin {
            font-size: 22px;
          }

          .hanzi {
            font-size: 14px;
          }

          .play-icon {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style> 